<%--
  Created by IntelliJ IDEA.
  User: 荔向荣
  Date: 2022/5/17
  Time: 17:06
  To change this template use File | Settings | File Templates.
--%>

<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="to-top.css">
    <title>查询读者</title>
</head>
<body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/js/bootstrap.min.js"></script>
<div>
    <%--   <form action="${pageContext.request.contextPath}/Find_bookServlet" method="post">--%>
    <form id="search_book_form" class="col-lg-12" style="height:40px;">
        <table>
            <tr>
                <td class="col-lg-8">
                    <input type="text" class="form-control" id="searchName" placeholder="请输入想要查找的书名">
                </td>
                <td class="col-lg-4">
                    <input type="submit" class="form-control  btn-outline-info" id="QueryBook" value="查询">
                </td>
            </tr>
        </table>
    </form>
</div>
<%--查询到的读者记录展示--%>
<table class="table table-hover " id="book_table">
    <thead class="thead-light">
    <tr>
        <th>编号ID</th>
        <th>书号</th>
        <th class="text-center">封面</th>
        <th>书名</th>
        <th>作者</th>
        <th>出版社</th>
        <th>价格</th>
        <th>状态</th>
    </tr>
    </thead>
    <tbody>
    <c:if test="${not empty sessionScope.book}">
        <c:forEach items="${sessionScope.book}" var="Book">
            <tr>
                <td style="vertical-align: middle"><strong>${Book.bkID}</strong></td>
                <td style="vertical-align: middle"><strong>${Book.bkCode}</strong></td>
                <td><img src="${Book.bkPic}" style="width:120px;height: 150px " alt=""></td>
                <style>
                    img {
                        transition: all 0.5s; /*transition:过度属性*/
                        cursor: pointer; /*当鼠标进入图片的时候，鼠标的样式变为手型 */
                    }

                    img:hover {
                        transform: scale(1.2); /*transform:变形属性，scale：缩放1.1倍 */
                    }
                </style>

                <td style="vertical-align: middle;color: dodgerblue"><strong>${Book.bkName}</strong></td>
                    <%--                <td style="color: darkorange;vertical-align: middle">${Book.bkName}</td>--%>
                <td style="vertical-align: middle"><strong>${Book.bkAuthor}</strong></td>
                <td style="vertical-align: middle"><strong>${Book.bkPress}</strong></td>
                <td style="vertical-align: middle"><strong>${Book.bkPrice}</strong></td>
                <td style="vertical-align: middle;color:dodgerblue"><strong>${Book.bkStatus}</strong></td>
                <td hidden>${Book.bkBrief}</td>
                <td style="vertical-align: middle">
                    <button data-toggle="modal" data-target="#myModal1" id="display_bkBrief" class="btn btn-info">查看简介
                    </button>
                </td>
                <style>
                    button {
                        transition: all 0.5s linear;
                    }

                    button:hover {
                        transform: scale(1.1);
                    }
                </style>
            </tr>
        </c:forEach>
    </c:if>
    </tbody>
</table>

<div class="modal fade" id="myModal1" data-backdrop=false>
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">书籍简介:</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <!-- 模态框主体 -->
            <div class="modal-body">
                <p class="h5" id="bk_Brief"></p>
            </div>
            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).click(function (e){
        if($(e.target).attr('id')==="display_bkBrief"){
            //$(e.target).parents('tr')用来获取是哪一行，children('td').eq(8).text()第九列的内容
            var bkBrief=$(e.target).parents('tr').children('td').eq(8).text();
            $("#bk_Brief").text(bkBrief);
        }
    })
</script>


<script>
    $(function () {
        $("#QueryBook").click(function () {
            //获取bkName值
            let searchName = $("#searchName").val();
            //利用post请求将参数发送给SearchBookServlet处理
            $.post("http://localhost:8080/SearchBookServlet", "searchName=" + searchName, function (data, status) {
                $("#test1").load("DisplayBook.jsp");
            }, "html");
        });
    })

</script>

</body>
</html>
